<template>
  <div class="mod-config">
    <basic-container>
      <el-card class="box-card" style="margin-bottom: 15px;">
        <div class="text item">
          <el-form inline label-width="80px" @keyup.enter.native="searchHandle">
            <el-form-item label="单据编号">
              <el-input v-model="dataForm.billId"></el-input>
            </el-form-item>
            <el-form-item label="运单单号">
              <el-input v-model="dataForm.transportBillId"></el-input>
            </el-form-item>
            <el-form-item label="收入仓位">
              <el-select v-model="dataForm.inStockId">
                <el-option v-for="item in stockOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-select v-model="dataForm.inveStatus">
                <el-option value="0" label="未审核"></el-option>
                <el-option value="1" label="已审核"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审核日期">
              <el-row>
                <el-col :span="11">
                  <el-date-picker v-model="dataForm.auditTimeStart" style="width: 100%;" value-format="yyyy-MM-dd" :picker-options="checkOptionsStart" @change="checkChangeEnd"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                <el-col :span="11">
                  <el-date-picker v-model="dataForm.auditTimeEnd" style="width: 100%;" value-format="yyyy-MM-dd" :picker-options="checkOptionsEnd" @change="checkChangeStart"></el-date-picker>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="审核人">
              <el-input v-model="dataForm.auditUserName"></el-input>
            </el-form-item>
            <el-form-item label="结算人">
              <el-input v-model="dataForm.financeUserName"></el-input>
            </el-form-item>
            <el-form-item label="商品类别">
              <el-select v-model="dataForm.ctgId">
                <el-option v-for="item in ctgOptions" :value="item.id" :label="item.name" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="制单日期">
              <el-row>
                <el-col :span="11">
                  <el-date-picker v-model="dataForm.createTimeStart" style="width: 100%;" value-format="yyyy-MM-dd" :picker-options="orderOptionsStart" @change="orderChangeEnd"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                <el-col :span="11">
                  <el-date-picker v-model="dataForm.createTimeEnd" style="width: 100%;" value-format="yyyy-MM-dd" :picker-options="orderOptionsEnd" @change="orderChangeStart"></el-date-picker>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input v-model="dataForm.viewGoodsName"></el-input>
            </el-form-item>
            <el-form-item label="商品代码">
              <el-input v-model="dataForm.goodsCode"></el-input>
            </el-form-item>
            <el-form-item label="制造商">
              <el-input v-model="dataForm.supplyName">
                <el-button slot="append" @click="openSupplyDialog">选择</el-button>
              </el-input>
            </el-form-item>

            <el-row>
              <el-button icon="el-icon-search" type="primary" @click="searchHandle">查询</el-button>
              <el-button icon="el-icon-delete" type="info" @click="clearSearchForm">清空</el-button>
              <!-- <el-button v-if="permissions.eims_eimscustomerfeedback_add" icon="el-icon-plus" type="primary" size="mini" style="float: right;" @click="addOrUpdateHandle()">新增</el-button> -->
            </el-row>
          </el-form>
        </div>
      </el-card>

      <div class="avue-crud">
        <el-table :data="dataList" height="calc(100vh - 215px)" border v-loading="dataListLoading">
          <el-table-column prop="billId" label="单号" width="170"></el-table-column>
          <el-table-column prop="ctgName" label="商品类别" width="80"></el-table-column>
          <el-table-column prop="transportBillId" label="运单单号" width="150"></el-table-column>
          <el-table-column prop="supplyName" label="制造商"></el-table-column>
          <el-table-column prop="inStockName" label="收入仓位" width="150"></el-table-column>
          <el-table-column prop="createTime" label="单据日期" width="150"></el-table-column>
          <el-table-column prop="acceptanceUserName" label="验收人" width="80"></el-table-column>
          <el-table-column prop="acceptanceTime" label="验收时间" width="150"></el-table-column>
          <el-table-column label="操作" width="140" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-collection" @click="checkPurchaseDetail(scope.row.ctgId,scope.row.id)">详情</el-button>
              <el-button v-if="permissions.eims_inventoryapply_edit" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.ctgId,scope.row.id)" :disabled="scope.row.acceptanceStatus == '1'">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination" style="margin-bottom: 10px;">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100, 200]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
      <detail-dialog v-if="detailDialogVisible" ref="detailDialog" @refreshDataList="getDataList"></detail-dialog>
      <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyData"></search-supply>
    </basic-container>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { filterParams } from '@/util/tools'
  import { receiveGoodsFetchList } from '@/api/eims/purchase/receive-goods'
  import { getCtgList } from '@/api/eims/ctg'
  import { getStockList } from '@/api/eims/stock'

  import TableForm from './form'
  import DetailDialog from './detail'
  import SearchSupply from '@/components/business/SearchSupply'

  export default {
    data() {
      return {
        dataForm: {},
        dataList: [],
        pageIndex: 1,
        pageSize: 200,
        totalPage: 0,
        ctgOptions: [],
        stockOptions: [],
				orderOptionsStart: {},
				orderOptionsEnd: {},
				checkOptionsStart: {},
				checkOptionsEnd: {},
        dataListLoading: false,
        addOrUpdateVisible: false,
        detailDialogVisible: false,
        supplyVisible: false
      }
    },
    components: {
      TableForm,
      DetailDialog,
      SearchSupply
    },
    created() {
      this.getDataList()
      this.getGoodsCtgList()
      this.getStockList()
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      //  清空搜索表单
      clearSearchForm() {
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true
        let ctgIds =[4,5]
        let params1 = { current: this.pageIndex, size: this.pageSize,inveStatus:1,ctgIds }
        let params2 = filterParams(this.dataForm)
        receiveGoodsFetchList(Object.assign(params1,params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
					this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 查看详情
      checkPurchaseDetail(type,id) {
        let data = {
          type: type,
          id: id
        }
        this.detailDialogVisible = true
        this.$nextTick(() => {
          this.$refs.detailDialog.init(data)
        })
      },
      // 新增 / 修改
      addOrUpdateHandle(type,id) {
        let data = {
          type: type,
          id: id
        }
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(data)
        })
      },
			orderChangeStart (){
			  this.orderOptionsStart = Object.assign({},this.orderOptionsStart,{
			    disabledDate: (time) => {
			      if(this.dataForm.createTimeEnd){
			        return time.getTime() > this.dataForm.createTimeEnd
			      }else{
			        return false
			      }

			    }
			  })
			},
      //   获取商品类别列表
      getGoodsCtgList() {
        getCtgList().then(response => {
          if(response.data.code == '0'){
            this.ctgOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //   获取仓位列表
      getStockList() {
        getStockList().then(response => {
          if(response.data.code == '0'){
            this.stockOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //   打开制造商选择弹窗
      openSupplyDialog() {
        this.supplyVisible = true
        this.$nextTick(() => {
          this.$refs.supplyDialog.init({ctgId: ''})
        })
      },
      //   获取制造商信息
      getSupplyData(data){
        this.$set(this.dataForm,'supplyName',data.name)
        this.$set(this.dataForm,'supplyId',data.id)
      },
			orderChangeEnd (){
			  this.orderOptionsEnd = Object.assign({},this.orderOptionsEnd,{
			    disabledDate: (time) => {
			      if(this.dataForm.createTimeStart){
			        return time.getTime() < this.dataForm.createTimeStart
			      }else{
			        return false
			      }
			    }
			  })
			},
			checkChangeStart (){
			  this.checkOptionsStart = Object.assign({},this.checkOptionsStart,{
			    disabledDate: (time) => {
			      if(this.dataForm.auditTimeEnd){
			        return time.getTime() > this.dataForm.auditTimeEnd
			      }else{
			        return false
			      }
			    }
			  })
			},
			checkChangeEnd (){
			  this.checkOptionsEnd = Object.assign({},this.checkOptionsEnd,{
			    disabledDate: (time) => {
			      if(this.dataForm.auditTimeStart){
			        return time.getTime() < this.dataForm.auditTimeStart
			      }else{
			        return false
			      }
			    }
			  })
			}
    }
  }
</script>
